{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div class="bs-example" data-example-id="panel-without-body-with-table">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                表单面板
            </div>
            <form id="formAdd" novalidate>   
                <div class="clearfix">
                    {% for field in form %}
                    <div class="col-xs-6">
                        <div class="form-group" style="position:relative;margin-bottom: 20px;">
                            <label>{{field.label}}</label> {{field}}
                            <span class="error-msg" style="color: red; position:absolute;"></span>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="col-xs-12">
                        <button id="btnAdd" type="button" class="btn btn-primary">提交</button>
                    </div>

                </div>

            </form>
        
        
        </div>
    </div>

    <div>
    <div class="bs-example" data-example-id="panel-without-body-with-table">
        <div class="panel panel-default">
          <!-- Default panel contents -->
          <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            靓号列表
          </div>
          <!-- Table -->
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>级别</th>
                <th>标题</th>
                <th>详细</th>
                <th>用户</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {%for obj in queryset%}
              <tr>
                <th scope="row">{{obj.id}}</th>
                <td>{{obj.get_level_display}}</td>
                <td>{{obj.title}}</td>
                <td>{{obj.detail}}</td>
                <!-- 下面我写obj.user似乎也没问题 -->
                <td>{{obj.user.username}}</td>  
  
  
                <td>
                  <!-- <a class="btn btn-primary btn-xs" href="/depart/edit/?nid={{obj.id}}">编辑</a> -->
                  <a class="btn btn-primary btn-xs" href="/num/{{obj.id}}/edit/">编辑</a>
                  <a class="btn btn-danger btn-xs" href="/num/delete/?nid={{obj.id}}">删除</a>
                </td>
              </tr>
              {%endfor%}
            </tbody>
          </table>
        </div>
      </div>

      <div class="container">
      <!-- <!—HTML中分页导航开始： 这部分内容基本不用改，传过来的统一要用queryset命名--> -->
      <div class="pagination" style="margin-top:1px ;">
        <span class="step-links">
          {% if queryset.has_previous %}
          <a href="?page=1">&laquo; 首页</a>
          <a href="?page={{ queryset.previous_page_number }}">上一页</a>
          {% endif %}
  
          <span class="current">
            第 {{ queryset.number }} 页 / 共 {{ paginator.num_pages }} 页
          </span>
  
          {% if queryset.has_next %}
          <a href="?page={{ queryset.next_page_number }}">下一页</a>
          <a href="?page={{ paginator.num_pages }}">末页 &raquo;</a>
          {% endif %}
        </span>
  
      <!-- 跳转输入框 -->
      <form method="get" style="display: inline-block; margin-left: 20px;">
        <input type="number" 
               name="page" 
               min="1" 
               max="{{ paginator.num_pages }}"
               value="{{ articles.number }}"
               style="width: 50px; padding: 4px;">
        <button type="submit">跳转</button>
     </form>
  
     </div>
      <!-- 分页导航结束-->
    </div>

</div>


<h1>任务管理</h1>
<h3>示例2</h3> 
<input id="btn1" type="button" class="btn btn-primary" value="点击1">

<h3>示例3：把input输入内容传到后台</h3>
<input type="text" id="txtUser" placeholder="姓名">
<input type="text" id="txtAge" placeholder="年龄">
<input id="btn2" type="button" class="btn btn-primary" value="点击2">

<h3>示例4：当input框较多时更简单的传值方法：form表单</h3>
<form id="form3">
    <input type="text" name="User" placeholder="姓名">
    <input type="text" name="Age" placeholder="年龄">
    <input type="text" name="Mail" placeholder="邮箱">
</form>
<input id="btn3" type="button" class="btn btn-primary" value="点击3">
 
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function(){
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
            bindBtnAddEvent();
        })
        function bindBtn1Event(){
            $("#btn1").click(function(){
                $.ajax({
                url:'/task/ajax/',
                type:"post",
                data:{
                    n1:334,
                    n2:445
                },
                // dataType:"json",  写不写感觉没差别
                success:function(res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                    
                }
             })
            })
        }
        function bindBtn2Event(){
            $("#btn2").click(function(){
                $.ajax({
                url:'/task/ajax/',
                type:"post",
                data:{
                    name:$("#txtUser").val(),
                    age:$("#txtAge").val(),
                },
                dataType:"json",   
                success:function(res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                    
                }
             })
            })
        }
        function bindBtn3Event(){
            $("#btn3").click(function(){
                $.ajax({
                url:'/task/ajax/',
                type:"post",
                data:$("#form3").serialize(),
                dataType:"json",   
                success:function(res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                    
                }
             })
            })
        }
        function bindBtnAddEvent(){
            $("#btnAdd").click(function(){
                // 提前清空一下错误信息
                $(".error-msg").empty(); 

                $.ajax({
                url:'/task/add/',
                type:"post",
                data:$("#formAdd").serialize(),
                dataType:"json",   
                success:function(res) {
                    if (res.status){
                        alert("添加成功！");
                        location.reload();

                    } else {
                        // 循环获取每一条错误信息并显示
                        $.each(res.error, function(name,data){
                            $("#id_"+name).next().text(data[0]);
                        })
                    }      
                    
                }
             })
            })
        }
    </script>
{% endblock %}